<template>
    <div class="cardDataEnquiryMain">
        <div class="box-group businessIndex">
            <div class="content">
                <el-row>
                    <el-col :span="8">
                        <p>
                            <span>卡号：</span>
                            {{cardData.CARDNO}}
                        </p>

                        <p>
                            <span>营销支行：</span>
                            {{cardData.branchName}}
                        </p>
                        <p>
                            <span>网申卡标识：</span>
                            {{cardData.ISSMOD | issModeFlag}}
                        </p>
                    </el-col>
                    <el-col :span="8">
                        <p>
                            <span>卡片凸字:</span>
                            {{cardData.EMBNAME}}
                        </p>
                        <p>
                            <span>卡片产品:</span>
                            {{cardData.PRODDESC}}
                        </p>

                        <p>
                            <span>卡介质:</span>
                            {{cardData.VCNSTS|cardType}}
                        </p>
                    </el-col>
                    <el-col :span="8">
                        <p>
                            <span>主附卡标识:</span>
                            {{cardData.MAFLAG|maFlag}}
                        </p>
                        <p>
                            <span>发卡日期:</span>
                            {{cardData.ISSDATE | filterTimeDate}}
                        </p>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="box-group businessIndex">
            <div class="content">
                <el-row>
                    <el-col :span="8">
                        <p>
                            <span>人民币信用额度:</span>
                            {{cardData.CRDLIMT}}
                        </p>
                        <p>
                            <span>首次激活日期:</span>
                            {{cardData.ACTIVEFST | filterTimeDate}}
                        </p>
                        <p>
                            <span>年费类型:</span>
                            {{cardData.FEECODE|filterfeetp(FEECODE_FILTER_list)}}
                        </p>
                    </el-col>
                    <el-col :span="8">
                        <p>
                            <span>美元信用额度:</span>
                            {{cardData.XCREDLIMIT}}
                        </p>

                        <p>
                            <span>最近激活日期:</span>
                            {{cardData.ACTIVDAY | filterTimeDate}}
                        </p>
                        <p>
                            <span>下次年费收取时间:</span>
                            {{cardData.FEEMONTH|filterDateYYMM}}
                        </p>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="box-group businessIndex">
            <div class="content">
                <el-row>
                    <el-col :span="8">
                        <p>
                            <span>是否设置交易密码:</span>
                            {{cardData.PINSET|ifpaypwd}}
                        </p>
                    </el-col>
                    <el-col :span="8">
                        <p>
                            <span>当日密码错误次数:</span>
                            {{cardData.PINFAILD}}
                        </p>
                    </el-col>
                    <el-col :span="8">
                        <p>
                            <span>累计密码错误次数:</span>
                            {{cardData.PINFAILT}}
                        </p>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="box-group businessIndex">
            <div class="content">
                <el-row>
                    <el-col :span="8">
                        <p>
                            <span>是否绑定ETC:</span>
                        </p>
                        <p>
                            <span>单笔交易限额:</span>
                            {{cardFlowData.MAXAINAMTG}}
                        </p>
                        <p v-if="cardData.MAFLAG!=='1'">
                            <span>主卡人姓名:</span>
                            {{custData.NAME}}
                        </p>
                    </el-col>
                    <el-col :span="8">
                        <p>
                            <span>小额免密免签状态:</span>
                            {{cardFlowData.UNQPASS | unqpass}}
                        </p>

                        <p>
                            <span>单日交易限额:</span>
                            {{cardFlowData.MAXPAMT}}
                        </p>
                        <p v-if="cardData.MAFLAG!=='1'">
                            <span>主卡人证件号:</span>
                            {{custData.IDNO}}
                        </p>
                    </el-col>

                    <el-col :span="8">
                        <p>
                            <span></span>
                        </p>
                        <p>
                            <span></span>
                        </p>
                        <p v-if="cardData.MAFLAG!=='1'">
                            <span>与主卡人关系:</span>
                            {{custData.MAFLAG|mainflag(mainflagList)}}
                        </p>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="box-group businessIndex" v-if="tableData.length > 0">
            <div class="content">
                <div slot="headerss" class="clearfix">
                    <span>
                        <strong>附属卡信息</strong>
                    </span>
                </div>
                <el-table
                    class="heard-bg business_table"
                    :data="tableData"
                    width="100%"
                    border
                    stripe
                    highlight-current-row
                >
                    <el-table-column label="附卡卡号" prop="CARDNBR"></el-table-column>
                    <el-table-column label="凸字姓名" prop="EMBNAME"></el-table-column>
                    <el-table-column label="有效期(年-月)" prop="EXPIRE">
                        <template slot-scope="scope">
                            <span>{{ scope.row.EXPIRE | getDate}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="卡片产品" prop="PRODDESC"></el-table-column>
                    <el-table-column label="卡片状态" prop="CANCLCODE">
                        <template slot-scope="scope">
                            <span>{{ scope.row.CANCLCODE | getText(cardStatus) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="附卡额度" prop="LMTOPT">
                        <template
                            slot-scope="scoped"
                        >{{ scoped.row | getCRDLIMIT(tableData,cardData.CRDLIMT)}}</template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import moment from 'moment';
import { getDictMappingValue, getDictSelectList, getALLCupdAndIBankDict } from '@/utils/Common';
import { isEmptyObject } from '@/utils/Object';
import { PAPERS_TYPE } from '@/utils/Contants';

export default {
    name: 'CardDataEnquiryItem',
    data() {
        return {
            PINCHK_FILTER: '', // 消费是否使用密码
            PBFLAG_FILTER: '', // 个人卡标识
            MAFLAG_FILTER: '', // 主附卡标识
            VCNSTS_FILTER: '', // 虚拟卡状态
            FEECODE_FILTER: '', // 年费代码
            PINSTS_FILTER: '', // 卡锁定状态
            ETCSIGNFLG: '',//是否绑定ETC
            Source_filter: '',
            FEECODE_Option: [],
            cardStatus: [],
            isshowss: false,
            mainflagList: [],
            FEECODE_FILTER_list: [],
        };
    },
    props: {
        tableData: {
            type: Array,
        },
        // isShowLabeCol: {
        //     type: Object,
        // },
        cardData: {
            type: Object,
        },
        cardFlowData: {
            type: Object,
        },
        custData: {
            type: Object,
        },
        cardETCSignData: {
            type: Object,
        },
        DicValue: {
            type: Object,
        }, // 组件传过来的字典值
    },
    filters: {

        // 日期转换
        getDate(time) {
            time += '';
            if (time.trim()) {
                const Date = moment(time, 'YYMM').format('YY-MM');
                return Date;
            }
        },
        // 卡片状态
        getText(text, list) {
            let txt = '';
            if (text) {
                list.forEach((item) => {
                    if (item.code === text.trim()) {
                        txt = item.label;
                    }
                });
            }
            return txt;
        },
        //与主卡人关系
        mainflag(text, list) {
            let txt = '';
            if (text) {
                list.forEach((item) => {
                    if (item.code === text.trim()) {
                        txt = item.label;
                    }
                });
            }
            return txt;
        },
        filterfeetp(text, list) {
            let txt = '';
            if (text) {
                list.forEach((item) => {
                    if (item.code === text.trim()) {
                        txt = item.label;
                    }
                });
            }
            return txt;
        },
        // 额度
        getCRDLIMIT(row, cardList, lmt) {

            let CRDLIMIT;
            if (row.LMTOPT === 1) {
                CRDLIMIT = `${row.CRPER}%`;
            } else if (row.LMTOPT === 0) {
                CRDLIMIT = lmt;
            } else {
                CRDLIMIT = row.CRDLIMIT.toFixed(2);
            }
            return CRDLIMIT;
        },

        issModeFlag: (value) => {
            if (value == '01') {
                return '是';
            } else {
                return '否';
            }
        },
        cardType: (value) => {
            console.log("虚拟卡状态|" + value + "|");
            if (value == 'A') {
                return '虚拟卡';
            } else if (value == 'B') {
                return '虚实同发卡';
            } else {
                return '实体卡';
            }
        },
        maFlag: (value) => {
            if (value == '1') {
                return '主卡';
            } else {
                return '附卡';
            }
        },
        ifpaypwd: (value) => {
            if (value == '1') {
                return '是';
            } else {
                return '否';
            }
        },
        ifETC: (value) => {
            if (value == '0' || value == '') {
                return '否';
            } else {
                return '是';
            }
        },
        isShowPbflag: (value) => {
            if (value === 'P') {
                return '个人卡';
            } if (value === 'B') {
                return '标准公司卡';
            } if (value === '') {
                return '专用公司卡';
            } return value;
        },
        isPinset: (value) => {
            if (value == '0') {
                return '未设置';
            } if (value == '1') {
                return '已设置';
            }
            return '';
        },

        unqpass: (value) => {
            if (value == '0') {
                return "未设置";
            } else if (value == '1') {
                return "关闭";
            } else if (value == '2') {
                return "开通";
            }
        },
        isFeecode: (value, FEECODE_Option) => {
            let IValue = `${value}`.trim();
            FEECODE_Option.forEach((item) => {

                if (IValue == item.code) {
                    IValue = item.label;
                    return IValue;
                }
            });

            return IValue;
        },
        isVfcrlmtset: (value) => {
            switch (`${value}`) {
                case '0':
                    return '共享限额';
                case '1':
                    return '使用限额百分比';
                case '2':
                    return '使用限额固定值';
            }
        },
        filterTimeDate: (value) => {
            value = (`${value}`).trim();
            if (value === '0' || value === '00000000' || value === '') {
                return '';
            } if (value) {
                return moment(value, 'YYYYMMDD').format('YYYY-MM-DD');
            }
        },
        filterDateYYMM: (value) => {
            if (value) {
                return moment(value, 'YYMM').format('YY-MM');
            }
            return '';
        },
        filterKetype: (value) => {
            value = (`${value}`).trim();
            for (let index = 0; index < PAPERS_TYPE.length; index++) {
                const element = PAPERS_TYPE[index];
                if (element.value === value) {
                    return element.name;
                }
            }
        },
        Activech_filter: (value, Source_filter) => {
            value = (`${value}`).trim();
            for (let index = 0; index < Source_filter.length; index++) {
                const element = Source_filter[index];
                if (element.code === value) {
                    return `${value} + ${element.label}`;
                }
            }
            return value;
        },
    },

    mounted() {
        this.dictionaries();
    },
    methods: {

        async dictionaries() {
            //this.FEECODE_Option = await getALLCupdAndIBankDict('FEECODE', this);
            //this.Source_filter = await getDictSelectList('SOURCE', this);
            this.mainflagList = await getDictSelectList('MAINFLAG', this);
            this.cardStatus = await getDictSelectList('CLOCD', this);

            this.FEECODE_FILTER_list = await getDictSelectList('FEECODE', this);

            this.PINCHK_FILTER = await getDictMappingValue('yesOrNo', this.cardData.PINCHK, this);
            this.PBFLAG_FILTER = await getDictMappingValue('PBFLAG', this.cardData.PBFLAG, this);
            this.MAFLAG_FILTER = await getDictMappingValue('MAFLAG', this.cardData.MAFLAG, this);
            this.VCNSTS_FILTER = await getDictMappingValue('VCNSTS', this.cardData.VCNSTS, this);
            //this.FEECODE_FILTER = await getDictMappingValue('FEECODE', this.cardData.FEECODE, this);
            this.PINSTS_FILTER = await getDictMappingValue('PINSTS', this.cardData.PINSTS, this);

        },

        // 开通小额免密
        ktxemm() {
            this.$emit('cardFlowPramSet', '1');
        },
        // 关闭小额免密
        gbxemm() {
            this.$emit('cardFlowPramSet', '2');
        },

    },

};
</script>

<style lang='scss'>
//主体内容
.cardDataEnquiryMain {
    /* margin: 0 16px 70px; */
    /* .colItem {
        margin: 5px 0;
    } */
    .content {
        /* margin-top: 10px; */
    }
    .content_bottom {
        margin-top: 20px;
    }
    .box-group .content p {
        color: #000;
        font-size: 12px;
        text-align: left;
        span {
            text-align: right;
            display: inline-block;
            width: 32%;
            margin-right: 4px;
        }
    }
    .box-group .title {
        font-size: 14px;
    }
    .el-row {
        margin: 5px 0;
        .el-col {
            text-align: left;
            color: #333;
            span {
                display: inline-block;
            }
            .queryMainLeft {
                width: 43%;
                text-align: right;
                margin-right: 7px;
                color: #999;
            }
        }
    }
}
</style>
